<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta content="IE=8" http-equiv="X-UA-Compatible" />
    <title>{%list}</title>
    {$QPath}
    <link rel="stylesheet" type="text/css" href="__TMPL__../Admin/Public/base.css" />
    <script type="text/javascript" src="__TMPL__../Admin/Public/mootools.js"></script>
    <script type="text/javascript">
        var _gridOptions={
            rowMouseover:function(grid){
                this.getElement('span').style.display='inline';
            },
            rowMouseout:function(grid){
                this.getElement('span').style.display='none';
            }
        };
    </script>
    <script type="text/javascript" src="__TMPL__../Admin/Public/base.js"></script>
    <style type="text/css">
        #tree tr{ display:none;}
        #tree span{display:none;padding-left:20px;};
        .data td{border:medium none;}
        td.st{text-indent:0;}
        .st img{
            float:left;
            width:24px;
            height:24px;
        }
        .st img.minus,.st img.plus{
            cursor:default;
        }
        .st img.imgJump{
            float:none;
            width:12px;height:12px;
        }
    </style>
</head>
<body>
    <div id="container">
        <table class="tabmenu" cellspacing="0">
            <tbody>
                <tr>
                    <td class="wedge">&nbsp;</td>
                    <td class="wmenu here">{%list}</td>
                    <td class="wmenu"><a href="__URL__/add">{%add}</a></td>
                    <td>&nbsp;</td>
                </tr>
            </tbody>
        </table>
        <div class="main">
            <ul class="fnc">
                <li><button type="button" class="btn" onclick="doAction('sort')">{%sort}</button></li>
            </ul>
            <script type="text/javascript">
                var Nodes=[];
            </script>
            <form method="post" action="__URL__">
                <table class="data">
                    <thead>
                        <tr>
                            <th>{%name}</th>
                        </tr>
                    </thead>
                    <tbody class="grid" id="tree">
                    <?php
                    $add_sub=L('add_sub');
                    $alter=L('alter');
                    $move=L('move');
                    $removal=L('removal');
                    $jump=L('jump');
                    ?>
                    <iterate name="allCategorys" id="vo">
                        <tr>
                            <td id="node{$vo['id']}" class="st">
                                <if condition="$vo['jump'] neq ''">
                                    {$vo['name']}
                                    <a href="{$vo['jump']}" target="_blank"><img class="imgJump"
                                        src="__TMPL__../Admin/pCategory/jump.png"
                                        title="{$jump}" alt="{$jump}"/></a>
                                    <span>
                                        <a href="javascript:alterCategory({$vo['id']})">{$alter}</a>
                                        <a href="javascript:moveCategory({$vo['id']})">{$move}</a>
                                        <a href="javascript:removeCategory({$vo['id']})">{$removal}</a>
                                    </span>
                                <else />
                                    {$vo['name']}
                                    <span>
                                        <a href="javascript:addChildCategory({$vo['id']})">{$add_sub}</a>
                                        <a href="javascript:alterCategory({$vo['id']})">{$alter}</a>
                                        <a href="javascript:moveCategory({$vo['id']})">{$move}</a>
                                        <a href="javascript:removeCategory({$vo['id']})">{$removal}</a>
                                    </span>
                                </if>
                                <script type="text/javascript">
                                var tmp_node={ id:{$vo['id']},level:{$vo['level']},lft:{$vo['lft']},rgt:{$vo['rgt']},lastInLayer:false };
                                tmp_node.count=(tmp_node.rgt-tmp_node.lft-1)/2;
                                Nodes.push(tmp_node);
                            </script>
                            </td>
                        </tr>
                    </iterate>
                    </tbody>
                </table>
                <script type="text/javascript">
                    function addChildCategory(catid){
                        window.location='__URL__/add&catid='+catid;
                    }
                    function alterCategory(catid){
                        window.location='__URL__/edit&catid='+catid;
                    }
                    function moveCategory(catid){
                    }
                    function removeCategory(catid){
                    }
                </script>
            </form>
        </div>
    </div>
    <script type="text/javascript">
        var imgBasePath="__TMPL__../Admin/Public/img/tree/";
        var blank=imgBasePath+"blank.gif";
        var minus010=imgBasePath+"minus010.gif";
        var minus110=imgBasePath+"minus110.gif";
        var minus111=imgBasePath+"minus111.gif";
        var plus111=imgBasePath+"plus111.gif";
        var plus110=imgBasePath+"plus110.gif";
        var line101=imgBasePath+"line101.gif";
        var line111=imgBasePath+"line111.gif";
        var line110=imgBasePath+"line110.gif";

        $(window).addEvent('domready',function(){
            var stack=[],pnode;   //堆栈以保存父节点序列，即栈顶元素是当前节点的父节点
            var prependImg={};      //保存前置图像放法的对象
            prependImg["p1"]=[];
            var style=(Browser.Engine.trident==true)?"block":"table-row";   //FUCK IE
            for(var i=0,len=Nodes.length;i<len;i++){
                var node=Nodes[i];
                var td=$("node"+node.id);   //要插入图片的TD
                if(node.level==0){
                    td.grab(new Element("img",{"src":minus010}),"top");
                    stack.push(i);
                    pnode=node;
                    Nodes[i].lastInLayer=true;
                    td.parentNode.style.display=style;
                }else{
                    var diff=node.level-pnode.level;
                    if(diff>1){         //当前节点所处的层级恰好是“父节点”层级加1，则说明正好是父节点
                        var j=i-1;
                        stack.push(j);
                        pnode=Nodes[j];
                    }else if(diff<1){  //当前节点和“父节点”是同层级的，则说明要出栈，重设父节点
                        while(diff<1){
                            diff++;
                            stack.pop();
                        }
                        pnode=Nodes[stack[stack.length-1]];
                    }
                    if(node.lft+1==node.rgt){    //说明没有子节点了
                        if(node.rgt+1==pnode.rgt){       //是当前节点所处层级中的最后一个节点
                            imgObj=new Element("img",{"src":line110});
                            Nodes[i].lastInLayer=true;
                        }else{
                            imgObj=new Element("img",{"src":line111});
                        }
                    }else{      //包含子节点
                        if(node.rgt+1==pnode.rgt){
                            imgObj=new Element("img",{"src":plus110,"class":"plus"});
                            imgObj.store("imgtype","110");
                            Nodes[i].lastInLayer=true;
                        }else{
                            imgObj=new Element("img",{"src":plus111,"class":"plus"});
                            imgObj.store("imgtype","111");
                        }
                        //绑定事件
                        imgObj.addEvent('click',function(){
                            var tr=this.getParent().getParent();
                            var level=tr.retrieve("level");
                            if(this.className=="plus"){  //说明当前是+号
                                this.className="minus";
                                this.src=(this.retrieve("imgtype")=="110")?minus110:minus111;
                                while(true){
                                    tr=tr.getNext();
                                    if(!tr) break;
                                    var diff=tr.retrieve("level")-level;
                                    if(diff==1){
                                        tr.style.display=style;
                                    }else if(diff==0){
                                        break;
                                    }
                                }
                            }else{
                                this.className="plus";
                                this.src=(this.retrieve("imgtype")=="110")?plus110:plus111;
                                while(true){    //收缩时的效果
                                    tr=tr.getNext();
                                    if(!tr) break;
                                    var diff=tr.retrieve("level")-level;
                                    if(diff>=1){
                                        tr.style.display="none";
                                        var img=tr.getElements("img").getLast();
                                        if(img.className=="minus"){
                                            img.className="plus";
                                            img.src=(img.retrieve("imgtype")=="110")?plus110:plus111;
                                        }
                                    }else if(diff==0){
                                        break;
                                    }
                                }
                            }
                        });
                    }
                    td.getParent().store("level",node.level);
                    td.grab(imgObj,"top");
                    //插入前置的图像，先继承父节点
                    var inherit=$A(prependImg["p"+pnode.id]);
                    inherit.push( (pnode.lastInLayer)?"a":"b" );//b代表是竖线，a代表是空白图像
                    prependImg["p"+node.id]=inherit;
                    for(var m=-1,n=inherit.length-1;n>m;n--){
                        if(inherit[n]=="a") td.grab(new Element("img",{"src":blank}),"top");
                        else td.grab(new Element("img",{"src":line101}),"top");
                    }
                    //决定是否显示当前行
                    if(node.level==1){
                        td.parentNode.style.display=style;
                    }
                }
            }
        });
    </script>
</body>
</html>
